<!-- 圈子信息摘要 -->
<!-- 小默子 2020/8/16 -->
<!-- 小瓜子 2020/8/20 取消最外层循环，将循环挪至外层页面 -->
<!-- 小默子 2020/9/1  取消影响力 获取圈子成员和帖子-->
<!-- 小默子 2020/9/3  修改样式 获取圈子人数、帖子数量 -->
<template>
	<view class="community">
		<view class="box" @click="navTo()">
			<view class="comContent">
				<view class="comConMore">
					<view class="text">
						<view class="comTitle">{{summaryData.name}}</view>
					</view>
					<view class="description">{{summaryData.description}}</view>
				</view>
		
				<!-- 下方基本信息 -->
				<view class="more">					
					<!-- 关注人数 -->
					<text class="person">{{summaryData.members}}人关注</text>
					
					<!-- 帖子数量 -->
					<text class="posts">{{summaryData.topics}}帖子</text>
				</view>
			</view>
			<image :src="summaryData.avatarUrl" @tap.stop="previewImg(summaryData.avatarUrl)" mode="aspectFill"></image>
		</view>	
	</view>
</template>

<script>
	import { _ajax } from '../../in-xupt-functions.js'
	export default {
		props: {
			datas: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				// dataNum: [],
				// communityId: undefined
			};
		},
		methods: {
			previewImg: function(logourl){
				var that=this;
				var imgsArray = [];
				imgsArray[0] = logourl;
				uni.previewImage({
					current:0,
					urls:imgsArray
				})
			},
			// 点击跳转至圈子详情页
			navTo() {
				uni.navigateTo({
					url:'../../pages/EachCommuity/EachCommuity?communityId=' + this.summaryData.id  
				})
			}
		},
		computed: {
			summaryData() {
				return this.$props.datas
			}
		},
		// created() {
		// 	_ajax({
		// 		url: '/circle/'+this.summaryData.id,
		// 		method: 'GET',					
		// 	}).then(res=>{
		// 		this.dataNum = res.data.data
		// 	})
		// }
	}
</script>


<style lang="less">
	image {
		width: 190rpx;
		height: 190rpx;
	}
	view {
		font-size: @uni-font-size-base;
	}
	.community {
		font-family: "Microsoft Yahei";
		.box {
			padding: 10rpx 20rpx;
			margin-top: 14rpx;
			background-color: @uni-bg-color;
			display: flex;
			justify-content: space-between;
			.comContent {
				width: 70%;
				.comConMore {
					height: 80%;
					margin-right: 20rpx;
					border-bottom: 3rpx solid @gray-line;
					.text {
						display: flex;
						.comTitle {
							font-size: 40rpx;
							font-weight: bold;
							color: rgb(0,0,0);
						}
					}
					.description {
						padding-top: 16rpx;
					}
				}
				.more {
					margin: 10rpx 0 0 0;
					.posts {
						padding-left: 30rpx;
					}
				}
			}
		}
	}

</style>


